<script setup>
import { ref, inject, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { uploadImage, getUploadImagesCount, sendCategories } from '@/api/index.js'

const router = useRouter()
const message = inject('message')

// 响应式数据
const imageUrls = ref([])
const imageCount = ref(0)
const uploadArea = ref(null)
const fileInput = ref(null)
const categories = ref([]) // 分类列表
const selectedCategories = ref([]) // 选中的分类ID数组
const isDropdownOpen = ref(false) // 下拉框是否打开
const selectedFile = ref(null) // 选中的文件
const selectedImageUrl = ref('') // 选中图片的预览URL

// 新增筛选条件
const videoType = ref('static') // 类型：static-静态，dynamic-动态，默认静态
const sortType = ref('default') // 排序：default-默认，hot-最热，latest-最新，默认默认
const selectedCategory = ref('') // 选中的分类，默认不选

// 筛选选项
const videoTypeOptions = [
  { value: 'static', label: '静态' },
  { value: 'dynamic', label: '动态' }
]

const sortTypeOptions = [
  { value: 'default', label: '默认' },
  { value: 'hot', label: '最热' },
  { value: 'latest', label: '最新' }
]

// 跳转到首页
const goToHome = () => {
  router.push('/')
}

// 高亮上传区域
const highlight = () => {
  if (uploadArea.value) {
    uploadArea.value.style.borderColor = '#007bff'
    uploadArea.value.style.boxShadow = '0 0 10px rgba(0, 123, 255, 0.3)'
  }
}

// 取消高亮
const unHighlight = () => {
  if (uploadArea.value) {
    uploadArea.value.style.borderColor = '#ccc'
    uploadArea.value.style.boxShadow = 'none'
  }
}

// 处理文件选择
const handleFiles = (event) => {
  const files = event.target.files || event.dataTransfer?.files || []
  
  if (files.length === 0) return
  
  // 只处理第一个文件
  const file = files[0]
  
  // 验证文件类型
  if (!file.type.startsWith('image/')) {
    message.error('请选择图片文件')
    return
  }
  
  // 验证文件大小 (10MB = 10 * 1024 * 1024 bytes)
  const maxSize = 10 * 1024 * 1024
  if (file.size > maxSize) {
    message.error('文件大小不能超过10MB')
    return
  }
  
  // 保存选中的文件
  selectedFile.value = file
  
  // 创建预览URL
  selectedImageUrl.value = URL.createObjectURL(file)
  
  message.info('图片已选择，请点击上传按钮进行上传')
}

// 上传图片
const uploadSelectedImage = async () => {
  if (!selectedFile.value) {
    message.error('请先选择图片')
    return
  }
  
  if (selectedCategories.value.length === 0) {
    message.error('请选择至少一个分类')
    return
  }

  try {
    message.info('正在上传图片...')

    const response = await uploadImage(selectedFile.value, selectedCategories.value, heat.value, subCategory.value)

    if (response.code === 200) {
      const imageUrl = response.data
      imageUrls.value.push(imageUrl)
      message.success('图片上传成功！')

      // 清空选中的文件和预览
      selectedFile.value = null
      selectedImageUrl.value = ''

      // 清空文件输入框
      if (fileInput.value) {
        fileInput.value.value = ''
      }

      // 更新图片数量
      await getImageCount()
    } else {
      message.error(response.msg || '上传失败')
    }
  } catch (error) {
    console.error('上传错误:', error)
    message.error('上传失败，请重试')
  }
}

// 复制URL到剪贴板
const copyUrl = async (url) => {
  try {
    await navigator.clipboard.writeText(url)
    message.success('链接已复制到剪贴板')
  } catch (error) {
    console.error('复制失败:', error)
    message.error('复制失败，请手动复制')
  }
}

// 获取分类列表
const getCategories = async () => {
  try {
    const response = await sendCategories()
    if (response.code === 200) {
      categories.value = response.data || []
      // 默认选择第一个分类
      if (categories.value.length > 0) {
        selectedCategories.value = [categories.value[0].id]
      }
    }
  } catch (error) {
    console.error('获取分类列表失败:', error)
  }
}

// 获取图片数量
const getImageCount = async () => {
  try {
    const response = await getUploadImagesCount()
    if (response.code === 200) {
      imageCount.value = response.data || 0
    }
  } catch (error) {
    console.error('获取图片数量失败:', error)
  }
}

// 切换下拉框显示状态
const toggleDropdown = () => {
  isDropdownOpen.value = !isDropdownOpen.value
}

// 处理分类复选框变化
const handleCategoryCheckboxChange = (event) => {
  const categoryId = parseInt(event.target.value)
  const isChecked = event.target.checked

  if (isChecked) {
    if (!selectedCategories.value.includes(categoryId)) {
      selectedCategories.value.push(categoryId)
    }
  } else {
    selectedCategories.value = selectedCategories.value.filter(id => id !== categoryId)
  }
}

// 获取选中分类的显示文本
const getSelectedCategoriesText = () => {
  if (selectedCategories.value.length === 0) {
    return '请选择分类'
  }

  const selectedCategoryNames = categories.value
    .filter(category => selectedCategories.value.includes(category.id))
    .map(category => category.category_name)

  if (selectedCategoryNames.length <= 2) {
    return selectedCategoryNames.join(', ')
  } else {
    return `${selectedCategoryNames[0]}, ${selectedCategoryNames[1]} 等${selectedCategoryNames.length}个分类`
  }
}

// 点击外部关闭下拉框
const handleClickOutside = (event) => {
  const customSelect = document.querySelector('.custom-select')
  if (customSelect && !customSelect.contains(event.target)) {
    isDropdownOpen.value = false
  }
}

// 页面加载时获取数据
getCategories()
getImageCount()

// 添加和移除点击外部事件监听
onMounted(() => {
  document.addEventListener('click', handleClickOutside)
})

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside)
})
</script>

<template>
  <div class="Upload-images-for-free">
    <div class="Upload-images-for-free-box">
      <!--顶部-->
      <div class="Upload-images-for-free-header">
        <div class="Jump-to-home" @click="goToHome">
          <svg t="1753493997590" class="icon" viewBox="0 0 1303 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8423" width="48" height="48"><path d="M883.377486 1024h-181.529467c-36.692126 0-67.590759-30.898633-67.590759-67.590759v-135.181518c0-5.793494-3.862329-9.655823-9.655823-9.655823h-115.869873c-5.793494 0-9.655823 3.862329-9.655822 9.655823v135.181518c0 36.692126-30.898633 67.590759-67.590759 67.590759H249.955515c-57.934936 0-106.21405-48.279114-106.21405-106.21405V541.208864H132.154478c-46.347949 0-86.902405-28.967468-100.420556-73.384253-15.449316-44.416785 0-90.764734 36.692126-117.801037l434.512023-328.297973c38.623291-28.967468 90.764734-28.967468 127.45686 0l434.512022 328.297973c36.692126 27.036304 52.141443 75.315417 36.692127 117.801037s-54.072607 73.384253-100.420557 73.384253h-11.586987v137.112682c0 15.449316-13.518152 28.967468-28.967468 28.967469s-28.967468-13.518152-28.967468-28.967469V483.273927H1001.178523c25.105139 0 40.554455-17.380481 46.34795-32.829797s3.862329-38.623291-17.380481-54.072607L595.633969 68.07355c-17.380481-13.518152-40.554455-13.518152-57.934936 0L103.18701 396.371523c-21.24281 15.449316-21.24281 38.623291-17.380481 54.072607 5.793494 15.449316 19.311645 32.829797 46.347949 32.829797h71.453088V917.78595c0 27.036304 21.24281 48.279114 48.279114 48.279114h181.529467c5.793494 0 9.655823-3.862329 9.655823-9.655823v-135.181518c0-36.692126 30.898633-67.590759 67.590759-67.590759h115.869873c36.692126 0 67.590759 30.898633 67.590759 67.590759v135.181518c0 5.793494 3.862329 9.655823 9.655823 9.655823H885.308651c27.036304 0 48.279114-21.24281 48.279113-48.279114v-36.692126c0-15.449316 13.518152-28.967468 28.967469-28.967469s28.967468 13.518152 28.967468 28.967469V917.78595c-1.931165 57.934936-50.210278 106.21405-108.145215 106.21405z" fill="#1C2C70" p-id="8424"></path><path d="M566.666501 531.553041c-69.521924 0-125.525695-56.003772-125.525696-125.525695S497.144577 280.50165 566.666501 280.50165s125.525695 56.003772 125.525695 125.525696-56.003772 125.525695-125.525695 125.525695z m0-193.116454c-36.692126 0-67.590759 30.898633-67.590759 67.590759s30.898633 67.590759 67.590759 67.590759 67.590759-30.898633 67.590759-67.590759-30.898633-67.590759-67.590759-67.590759z" fill="#ED9A21" p-id="8425"></path></svg>
        </div>
        <p class="foliage-text">Foliage·</p>
        <p class="upload-text">Upload-images</p>
      </div>
      <!--功能-->
      <div class="Upload-images-for-free-function">
        <h1 class="seo-title" style="position: absolute; left: -9999px;">免费图片上传工具 - 在线图片托管服务</h1>
        <p>您当前最大可上传 10.00 MB 的图片，允许同时上传 1 张。本站已托管 {{ imageCount }} 张图片。</p>
        <p>请勿上传任何违规图片，否则您的IP将会被记录，严重者将被移交有关部门。</p>
        <p>==============================================</p>
        <div ref="uploadArea"
             class="upload-image-middle-file"
             @mouseover="highlight"
             @mouseleave="unHighlight"
             @click="$refs.fileInput.click()"
             @dragover.prevent="highlight"
             @dragleave.prevent="unHighlight"
             @drop.prevent="handleFiles">
          <!-- 显示选中的图片预览或上传提示 -->
          <div v-if="selectedImageUrl" class="selected-image-preview">
            <img :src="selectedImageUrl" alt="预览图片" class="preview-image" />
            <p class="preview-text">已选择图片，点击上传按钮进行上传</p>
          </div>
          <div v-else class="upload-placeholder">
            <!-- 使用 SVG 替换动态图片 -->
            <svg t="1753499303401" class="icon" viewBox="0 0 1355 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9602" width="64" height="64"><path d="M913.771356 651.624968c-0.880319 6.162235-1.760638 12.324469-2.640957 17.606384-1.760638 12.324469-4.401596 25.529258-7.922873 38.734046v1.760638c5.281915-19.367023 8.803192-38.734046 10.56383-58.101068z m0 0c-0.880319 6.162235-1.760638 12.324469-2.640957 17.606384-1.760638 12.324469-4.401596 25.529258-7.922873 38.734046v1.760638c5.281915-19.367023 8.803192-38.734046 10.56383-58.101068zM689.289954 52.127575L440.159613 535.42283c-24.648938 47.537238-6.162235 105.638307 41.375003 130.287245l483.295255 249.130341c47.537238 24.648938 105.638307 6.162235 130.287246-41.375004l249.130341-483.295255c24.648938-47.537238 6.162235-105.638307-41.375004-130.287245L819.577199 10.752571c-47.537238-24.648938-105.638307-5.281915-130.287245 41.375004zM862.712841 817.124982c18.486704-36.093088 32.571811-73.066496 41.375004-109.159584 7.922873-61.622346 12.324469-93.313838 13.204788-94.194157 2.640958-57.22075-5.281915-114.441499-22.8883-169.021292C856.550607 326.787173 776.441557 229.071739 669.042612 168.329713l51.938834-100.356392c15.845746-29.930854 52.819154-42.255323 82.750007-26.409577L1287.026708 290.694085c29.930854 15.845746 42.255323 52.819154 26.409577 82.750007l-176.063845 340.683541c-1.760638-2.640958-2.640958-5.281915-4.401596-7.922873-41.375004-70.425538-123.244692-109.159584-204.234061-94.194158-1.760638 0-2.640958 0.880319-4.401596 0.88032s-3.521277 0.880319-6.162235 0.880319l-2.640957 36.973407c1.760638-0.880319 4.401596-0.880319 6.162234-1.760638 78.348411-20.247342 159.33778 20.247342 191.029272 94.194157 1.760638 3.521277 3.521277 7.922873 4.401596 11.44415l-52.819153 102.11703c-15.845746 29.930854-52.819154 42.255323-82.750007 26.409577l-120.603734-62.502665c0-0.880319 0.880319-1.760638 1.760638-3.521277zM646.154312 195.619609c106.518626 57.22075 180.465441 152.295226 214.797891 259.694171 36.973407 115.321819 26.409577 237.686191-29.050535 345.085137-0.880319 1.760638-1.760638 3.521277-1.760638 5.281915L497.380363 634.018583c-29.930854-15.845746-42.255323-52.819154-26.409577-82.750007l175.183526-355.648967z m257.933533 514.106427c4.401596-19.367023 7.922873-38.734046 10.563831-58.101068-0.880319 6.162235-1.760638 12.324469-2.640958 17.606384-1.760638 12.324469-4.401596 25.529258-7.922873 38.734046v1.760638z" fill="#ACC6E5" p-id="9603"></path><path d="M720.101127 68.85364L669.042612 168.329713c108.279265 60.742027 187.507995 158.457461 225.361721 276.420236 17.606385 54.579792 25.529258 111.800542 22.8883 169.021292 1.760638-0.880319 3.521277-0.880319 6.162235-0.880319 1.760638 0 2.640958-0.880319 4.401596-0.88032 80.989369-14.085108 162.859057 23.768619 204.23406 94.194158 1.760638 2.640958 3.521277 5.281915 4.401596 7.922873l176.063846-340.683541c15.845746-29.930854 3.521277-66.904261-26.409577-82.750007L802.851134 42.444063c-29.930854-15.845746-66.904261-4.401596-82.750007 26.409577z" fill="#EDEFF4" p-id="9604"></path><path d="M1074.869775 465.877611c44.896281 22.8883 99.476073 5.281915 122.364372-38.734046 22.8883-44.896281 5.281915-99.476073-38.734046-122.364372-44.896281-22.8883-99.476073-5.281915-122.364372 38.734045-22.8883 44.896281-5.281915 99.476073 38.734046 122.364373z m67.78458-130.287246c27.289896 14.085108 37.853727 47.537238 23.768619 75.707454-14.085108 27.289896-47.537238 37.853727-75.707453 23.768619-27.289896-14.085108-37.853727-47.537238-23.768619-75.707453 14.965427-27.289896 48.417557-37.853727 75.707453-23.76862z" fill="#ACC6E5" p-id="9605"></path><path d="M621.505373 1007.273935H104.757988c-48.417557 0-88.031923-39.614365-88.031923-88.031923V391.930796c0-48.417557 39.614365-88.031923 88.031923-88.031923h516.747385c48.417557 0 88.031923 39.614365 88.031923 88.031923v527.311216c0 48.417557-39.614365 88.031923-88.031923 88.031923z" fill="#EDEFF4" p-id="9606"></path><path d="M621.505373 1024H104.757988C46.656919 1024 0 977.343081 0 919.242012V391.930796c0-58.101069 46.656919-104.757988 104.757988-104.757988h516.747385c58.101069 0 104.757988 46.656919 104.757988 104.757988v527.311216c0 58.101069-46.656919 104.757988-104.757988 104.757988z m-516.747385-704.255381c-39.614365 0-71.305857 31.691492-71.305857 71.305858v527.311216c0 39.614365 31.691492 71.305857 71.305857 71.305857h516.747385c39.614365 0 71.305857-31.691492 71.305858-71.305857V391.930796c0-39.614365-31.691492-71.305857-71.305858-71.305857H104.757988z" fill="#91A9CB" p-id="9607"></path><path d="M353.00801 500.210061V810.082428" fill="#C8DEFF" p-id="9608"></path><path d="M353.00801 826.808493c-9.683511 0-16.726065-7.922873-16.726066-16.726065V500.210061c0-9.683511 7.922873-16.726065 16.726066-16.726066s16.726065 7.922873 16.726065 16.726066V810.082428c0 9.683511-7.042554 16.726065-16.726065 16.726065z" fill="#91A9CB" p-id="9609"></path><path d="M508.824512 655.146244H198.071826" fill="#C8DEFF" p-id="9610"></path><path d="M508.824512 671.87231H198.071826c-9.683511 0-16.726065-7.922873-16.726065-16.726066s7.922873-16.726065 16.726065-16.726065h309.872367c9.683511 0 16.726065 7.922873 16.726066 16.726065s-7.042554 16.726065-15.845747 16.726066z" fill="#91A9CB" p-id="9611"></path></svg>
            <p>点击 / 拖拽文件到这里，支持快速上传</p>
          </div>
          <!-- 添加 ref 属性 -->
          <input
              type="file"
              id="fileInput"
              ref="fileInput"
              style="display:none;"
              multiple
              @change="handleFiles"
          />
        </div>

        <!-- 添加分类和热度输入字段 -->
        <div class="upload-params">
          <div class="param-item">
            <label for="classify">分类:</label>
            <div class="custom-select">
              <div class="select-header" @click="toggleDropdown">
                <span class="select-text">
                  {{ getSelectedCategoriesText() }}
                </span>
                <span class="select-arrow" :class="{ 'rotated': isDropdownOpen }">▼</span>
              </div>
              <div class="select-dropdown" v-show="isDropdownOpen">
                <div class="select-options">
                  <label
                    v-for="category in categories"
                    :key="category.id"
                    class="select-option"
                  >
                    <input
                      type="checkbox"
                      :value="category.id"
                      :checked="selectedCategories.includes(category.id)"
                      @change="handleCategoryCheckboxChange"
                    />
                    <span class="option-text">{{ category.category_name }}</span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div class="param-item">
            <label for="heat">热度:</label>
            <input
              id="heat"
              v-model.number="heat"
              type="number"
              placeholder="请输入热度"
              class="param-input"
            />
          </div>
          <div class="param-item">
            <label for="subCategory">二级分类:</label>
            <input
              id="subCategory"
              v-model="subCategory"
              type="text"
              placeholder="请输入二级分类"
              class="param-input sub-category-input"
            />
          </div>
          <div class="param-item">
            <button
              @click="uploadSelectedImage"
              class="upload-btn"
              :disabled="!selectedFile"
            >
              上传图片
            </button>
          </div>
        </div>

        <div class="upload-image-bottom-file">
          <p>访问地址:</p>
          <ul v-if="imageUrls && imageUrls.length > 0">
            <li v-for="(url, index) in imageUrls" :key="index" class="url-item">
              <a :href="url" target="_blank">{{ url }}</a>
              <button class="copy-btn" @click="copyUrl(url)">复制</button>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.Upload-images-for-free {
  width: 100%;
  height: 100vh;
  background-image: url("https://minio.foliages.site/upload-image-1/11ad36f7-e6ce-4ef5-8282-b2e31a03030c.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;

  /*免费上传图片的盒子*/
  .Upload-images-for-free-box {
    background: #faf8f8;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    width: 1150px;
    height: 800px;
    overflow: auto;
    margin-top: 40px;
    display: flex;
    flex-direction: column;

    @media (max-width: 1200px) {
      width: 95%;
      min-width: 300px;
    }

    @media (max-height: 800px) {
      height: 90vh;
    }

    .Upload-images-for-free-header{
      width: 100%;
      height: 60px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 5px;

      .Jump-to-home {
        display: flex;
        align-items: center;
        gap: 1px;
        cursor: pointer;
        transition: all 0.3s ease;
        border-radius: 8px;
        padding: 10px 0 10px 10px;

        &:hover {
          background-color: rgba(255, 255, 255, 0.2);
          transform: scale(1.05);
        }
      }

      svg {
        width: 38px;
        height: 38px;
      }

      .foliage-text {
        font-size: 23px;
        font-weight: 400;
        animation-name: flash;
        animation-duration: 1s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: 1;
      }

      .upload-text {
        font-size: 20px;
        color: #333;
        margin: 0;
        letter-spacing: 1px;
        position: relative;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        border: 1px solid rgba(255, 255, 255, 0.3);
      }

      @keyframes flash {
        0% { color: white; }
        50% { color: white; }
        100% { color: black; }
      }

      .icon {
        flex-shrink: 0;
      }
    }

    .Upload-images-for-free-function{
      flex: 1;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: left;
      padding-top: 3px;

      p {
        padding-left: 10px;
        line-height: 14px;
        font-size: 15px;
        margin-bottom: 12px;
        color: #666;
      }

      .upload-image-middle-file {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        max-width: 100%;
        height: 300px;
        margin: 5px 60px;

        border: 2px dashed #ccc;
        text-align: center;
        transition: border-color .3s ease-in-out, box-shadow .3s ease-in-out;


        svg{
          width: 85px;
          height: 85px;
        }

        .dynamic-image {
          width: 250px;
          height: 200px;
          display: block;
        }

        .selected-image-preview {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;

          .preview-image {
            max-width: 200px;
            max-height: 150px;
            object-fit: contain;
            border-radius: 8px;
            margin-bottom: 10px;
          }

          .preview-text {
            color: #007bff;
            font-size: 14px;
            margin: 0;
          }
        }

        .upload-placeholder {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
        }

        p {
          color: #5bdfcb;
        }

        input[type="file"] {
          cursor: pointer;
        }
      }

      .upload-image-middle-file:hover {
        border-color: #007bff;
        box-shadow: 0 0 10px rgba(0, 123, 255, 0.3);
      }

      .upload-params {
        margin: 20px 60px;
        display: flex;
        gap: 20px;
        align-items: center;

        .param-item {
          display: flex;
          align-items: center;
          gap: 10px;

          label {
            font-size: 14px;
            color: #333;
            font-weight: 500;
            min-width: 50px;
          }

          .param-input {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            width: 150px;
            transition: border-color 0.3s ease;

            &:focus {
              outline: none;
              border-color: #007bff;
              box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
            }
          }

          .sub-category-input {
            width: 330px; // 150px + 50px = 200px
          }

          .custom-select {
            position: relative;
            width: 200px;

            .select-header {
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 8px 12px;
              border: 1px solid #ddd;
              border-radius: 4px;
              background-color: white;
              cursor: pointer;
              transition: border-color 0.3s ease;

              &:hover {
                border-color: #007bff;
              }

              .select-text {
                flex: 1;
                font-size: 14px;
                color: #333;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }

              .select-arrow {
                font-size: 12px;
                color: #666;
                transition: transform 0.3s ease;
                margin-left: 8px;

                &.rotated {
                  transform: rotate(180deg);
                }
              }
            }

            .select-dropdown {
              position: absolute;
              top: 100%;
              left: 0;
              right: 0;
              background-color: white;
              border: 1px solid #ddd;
              border-top: none;
              border-radius: 0 0 4px 4px;
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
              z-index: 1000;
              max-height: 200px;
              overflow-y: auto;

              .select-options {
                padding: 4px 0;

                .select-option {
                  display: flex;
                  align-items: center;
                  padding: 8px 12px;
                  cursor: pointer;
                  transition: background-color 0.2s ease;

                  &:hover {
                    background-color: #f5f5f5;
                  }

                  input[type="checkbox"] {
                    margin-right: 8px;
                    cursor: pointer;
                  }

                  .option-text {
                    font-size: 14px;
                    color: #333;
                    flex: 1;
                  }
                }
              }
            }
          }

          .upload-btn {
            padding: 8px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            transition: background-color 0.3s ease;

            &:hover:not(:disabled) {
              background-color: #0056b3;
            }

            &:disabled {
              background-color: #ccc;
              cursor: not-allowed;
            }
          }
        }
      }

      .upload-image-bottom-file{
        border: 1px solid #e4e4e4;
        padding: 12px 12px 12px 0;
        border-radius: 6px;
        background-color: #f9f9f9;
        font-size: 14px;
        color: #333;
        max-height: calc(7 * (1.5em + 8px));
        overflow-y: auto;


        p{
          margin-bottom: 8px;
          font-weight: bold;
          color: #333;
        }

        ul{
          list-style: none;
          padding: 0;
          margin: 0;
          flex-wrap: wrap;
          gap: 8px;
        }

        li{
          display: flex;
          align-items: center;
          margin-bottom: 8px;
          gap: 10px;
        }

        .url-item {
          display: flex;
          align-items: center;
          gap: 10px;
        }

        a {
          padding-left: 10px;
          text-decoration: none;
          color: #338ba6;
          transition: all 0.2s ease;
          flex: 1;
        }

        a:hover {
          color: #7a7a7a;
        }

        .copy-btn {
          background: none;
          border: none;
          color: #338ba6;
          cursor: pointer;
          font-size: 14px;
          padding: 2px 8px;
          border-radius: 4px;
          transition: all 0.2s ease;
          white-space: nowrap;
        }

        .copy-btn:hover {
          background-color: rgba(51, 139, 166, 0.1);
          color: #2a6b7a;
        }
      }
    }
  }
}
</style>
